<script setup lang="ts">
import {ContentWrapNoHeaderLine} from '@/components/ContentWrap'
import {ElCard, ElRow, ElCol} from 'element-plus'
import { useRouter } from 'vue-router'

const { push } = useRouter()

const panelData = [
    {icon: 'svg-icon:shaxiang', title:'沙箱管理', eTitle: 'Sandbox management', url: '/manage/work/list'},
    {icon: 'svg-icon:miwenduan', title:'密文端管理', eTitle: 'Data side management', url: '/manage/data/list'},
    {icon: 'svg-icon:celue', title:'策略管理', eTitle: 'Leakage prevention management', url: '/leakage/list'},
    {icon: 'svg-icon:fenxiang', title:'分享管理', eTitle: 'Sharing management', url: '/share/fx_list'},
    {icon: 'svg-icon:kuaizhao', title:'快照管理', eTitle: 'Snapshot manager', url: '/snapshot/pan/list'},
    {icon: 'svg-icon:zuzhi', title:'组织管理', eTitle: 'Organization management', url: '/org/list'}
]

const pushTo = (url: string) => {
  push(url);
}
</script>

<template>
  <ContentWrapNoHeaderLine title="控制面板">
    <div class="el-message el-message--warning warning-style">
      <Icon icon="ep:warning-filled" class="el-icon el-message__icon el-message-icon--warning"/>
      <p class="el-message__content box-card">您可以在此设置组织内管理。</p>
    </div>
    <el-row :gutter="16">
      <el-col :span="6" style="margin-top: 16px" v-for="(panelInfo, ind) in panelData" :key="ind">
        <el-card class="panel-card cursor-pointer" shadow="never" @click="pushTo(panelInfo.url)">
          <el-row :gutter="16">
            <el-col :span="6"><Icon :icon="panelInfo.icon" style="font-size: 72px;"/></el-col>
            <el-col :span="18" class="titles">
                <p class="title-style">{{panelInfo.title}}</p>
                <p class="e-title-style">{{panelInfo.eTitle}}</p>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </ContentWrapNoHeaderLine>
</template>
<style lang="less" scoped>
.box-card {
  color: #5E5D72;
}

.panel-card {
  height: 168px;
  width: 100%;
  border-radius: 12px;
}

.warning-style {
  width: 100% !important;
  max-width: none !important;
  position: unset !important;
  transform: none !important;
  border-radius: 6px;
}
.titles {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-top: 2px;
  margin-bottom: 2px;
}
.title-style {
  font-size: 28px;
  font-weight: bold;
}

.e-title-style {
  color: lightgray;
}
</style>
